import { DemoBlock } from 'demos';
import { WeChatPayFill } from '@pxxtech/icons';
import { Button, Space } from '@pxxtech/component';

export default () => {
  return (
    <>
      <DemoBlock title="color">
        <Space wrap>
          <Button>default</Button>
          <Button color="primary">primary</Button>
          <Button color="primary-light">primary-light</Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="block">
        <Button block color="primary">
          Block Button
        </Button>
      </DemoBlock>
      <DemoBlock title="size">
        <Space wrap align="center">
          <Button size="mini" color="primary" icon={<WeChatPayFill />}>
            Mini
          </Button>
          <Button size="small" color="primary" icon={<WeChatPayFill />}>
            Small
          </Button>
          <Button size="middle" color="primary" icon={<WeChatPayFill />}>
            Middle
          </Button>
          <Button size="large" color="primary" icon={<WeChatPayFill />}>
            Large
          </Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="disabled">
        <Space wrap>
          <Button disabled>Disabled</Button>
        </Space>
      </DemoBlock>
      <DemoBlock title="loading">
        <Button loading>Loading</Button>
      </DemoBlock>
      <DemoBlock title="custom">
        <Button
          style={{
            '--color': 'var(--pxx-color-primary)',
            '--border-color': 'var(--pxx-color-primary)',
            '--background-color': 'transparent',
          }}
        >
          custom
        </Button>
      </DemoBlock>
    </>
  );
};
